<template>
    <div>
        <TitleBar class="absolute top-0 left-[34px] right-[143px]">线上收缴总数</TitleBar>
        <TimeSwitch class="absolute top-2 right-0" v-model="data.time" @input="refresh"/>
        <BigDigits class="absolute top-[64px] left-[34px] right-[31px]" :value="total.toFixed(2).padStart(12,'0')"></BigDigits>
        <div class="absolute top-[106px] right-[1px] text-[18px] text-white leading-[18px]">元</div>
        <img class="icon top-[155px] left-[0]" src="./assets/物业费欠费总数.svg" alt="">
        <img class="icon top-[155px] left-[221px]" src="./assets/物业费收缴总数.svg" alt="">
        <img class="icon top-[155px] left-[454px]" src="./assets/其他费用收缴总数.svg" alt="">
        <img class="icon top-[255px] left-[0]" src="./assets/停车费收缴总数.svg" alt="">
        <img class="icon top-[255px] left-[221px]" src="./assets/长期车收缴总数.svg" alt="">
        <img class="icon top-[255px] left-[454px]" src="./assets/临时车收缴总数.svg" alt="">
        <div class="detail top-[170px] left-[100px]">
            <div class="title">物业费欠费总数</div>
            <div class="value">{{(paymentStatistics.data && paymentStatistics.data.propertyFeeArrearage || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
        <div class="detail top-[170px] left-[320px]">
            <div class="title">物业费收缴总数</div>
            <div class="value">{{(paymentStatistics.data && paymentStatistics.data.propertyFeeSum || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
        <div class="detail top-[170px] left-[549px]">
            <div class="title">其他费用收缴总数</div>
            <div class="value">{{(paymentStatistics.data && paymentStatistics.data.otherExpensesSum || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
        <div class="detail top-[268px] left-[100px]">
            <div class="title">停车费收缴总数</div>
            <div class="value">{{(paymentStatistics.data && paymentStatistics.data.parkingFeeSum || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
        <div class="detail top-[268px] left-[320px]">
            <div class="title">长期车收缴总数</div>
            <div class="value">{{(longTotalMoney.data || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
        <div class="detail top-[268px] left-[549px]">
            <div class="title">临时车收缴总数</div>
            <div class="value">{{(tempTotalMoneyByVillage.data || 0).toFixed(2)}}<div>万元</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, computed, ComputedRef } from 'vue'
import TitleBar from '../components/TitleBar.vue'
import BigDigits from '../components/BigDigits/index.vue'
import TimeSwitch, { TimeRange } from '../components/TimeSwitch.vue'
import { useAutoLoader } from '../../shared/useAutoLoader'
import { Loader } from '../../shared/ApiTools'

export default defineComponent({
    components: { TitleBar, BigDigits, TimeSwitch },
    setup() {
        const villageId = inject<ComputedRef<string>>('villageId')!
        const data = reactive({
            time: TimeRange.all
        })
        const params = () => ({ villageId: villageId.value, time: data.time })
        const longTotalMoney = reactive(new Loader<number>('/pay/parking/getLongTotalMoney', 'POST', params))
        const tempTotalMoneyByVillage = reactive(new Loader<number>('/pay/parking/getTempTotalMoneyByVillage', 'POST', params))
        const paymentStatistics = reactive(new Loader<{
            propertyFeeSum?: number,
            propertyFeeArrearage?: number,
            otherExpensesSum?: number,
            parkingFeeSum?: number,
            paymentSum?: number
        }>('/serve/payment/statistics', 'POST', params))
        longTotalMoney.apiAdapter = (data) => Promise.resolve(parseFloat((data || 0).toString()))
        tempTotalMoneyByVillage.apiAdapter = (data) => Promise.resolve(parseFloat((data || 0).toString()))
        paymentStatistics.apiAdapter = (data) => {
            return Promise.resolve({
                propertyFeeSum: parseFloat((data?.propertyFeeSum || 0).toString()),
                propertyFeeArrearage: parseFloat((data?.propertyFeeArrearage || 0).toString()),
                otherExpensesSum: parseFloat((data?.otherExpensesSum || 0).toString()),
                parkingFeeSum: parseFloat((data?.parkingFeeSum || 0).toString()),
                paymentSum: parseFloat((data?.paymentSum || 0).toString())
            })
        }
        const total = computed(() => {
            return (longTotalMoney.data || 0) + (tempTotalMoneyByVillage.data || 0) + (paymentStatistics.data?.paymentSum || 0)
        })

        const refresh = () => {
            if (!villageId.value) { return }
            longTotalMoney.load()
            tempTotalMoneyByVillage.load()
            paymentStatistics.load()
        }

        useAutoLoader(refresh, 20 * 1000)
        
        return {
            data,
            paymentStatistics,
            tempTotalMoneyByVillage,
            longTotalMoney,
            total,
            refresh
        }
    }
})

</script>

<style scoped>
.icon {
    position: absolute;
    height: 76px;
    width: 116px;
    object-fit: cover;
    pointer-events: none;
}

.detail {
    position: absolute;
    height: 50px;
    width: 136px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
}

.title {
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: rgba(224, 247, 255, 0.8);
}

.value {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 9px;

    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 20px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #E0F7FF;
    text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
}

.value>div {
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #E0F7FF;
}
</style>